import React from 'react';
import ReactDOM from 'react-dom';
import { Tabs, Message  } from 'antd';
import Charts from './components/charts';
import FunderTypeCharts from './components/funderTypeCharts';
import MyFundsList  from './components/myFundsList';
import OtherFundsList  from './components/otherFundsList';

import UnFinanceFundsList  from './components/unFinanceFundsList';


const TabPane = Tabs.TabPane;


let List = React.createClass({
    contextTypes: {
       router: React.PropTypes.object
    },
    getInitialState() {
        return {
            myFundsList:[], // 我融资的列表            
            otherFundsList:[], // 他人融资的列表
          
            unFinanceFundsList:[], // 未融资的
            myFundsPagination:{
                current:1,
                pageSize:6
            }, 
            otherFundsPagination:{
                current:1,
                pageSize:6
            }, 
            // unFinRentedFunPagination:{
            //     current:1,
            //     pageSize:6
            // }, 
            // unFinUnRFunPagination:{
            //     current:1,
            //     pageSize:6
            // }, 
            unFinFunPagination:{
                current:1,
                pageSize:6
            },
        }
    },
    componentDidMount(){
        this.fetchMyFunds();
    },
    
    // 获取我融资的列表
    fetchMyFunds() {
        let params = this.state.myFundsPagination;
        let _me = this;
        Utils.sendAjax({
            url: '/funder/finance/myList',
            data: JSON.stringify(params),
            callback: function(result) {
                if (result.code == '200') {
                    let pager = _me.state.myFundsPagination;
                    pager.total = result.page.total;
                    _me.setState({
                        myFundsList: result.data,
                        myFundsPagination: pager
                    });
                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },

    // 获取他人融资的列表
    fetchOtherFunds() {
        let params = this.state.otherFundsPagination;
        
        let _me = this;
        Utils.sendAjax({
            url: '/funder/finance/otherList',
            data: JSON.stringify(params),
            callback: function(result) {
                if (result.code == '200') {
                    let pager = _me.state.otherFundsPagination;
                    pager.total = result.page.total;
                    _me.setState({
                        otherFundsList: result.data,
                        otherFundsPagination: pager
                    });
                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },

     // 获取未融资的融资列表
    fetchUnFinanceFunds() {
        let params = this.state.unFinFunPagination;
        let _me = this;
        Utils.sendAjax({
            url: '/funder/unFinance/list',
            data: JSON.stringify(params),
            callback: function(result) {
                if (result.code == '200') {
                    let pager = _me.state.unFinFunPagination;
                    pager.total = result.page.total;
                    _me.setState({
                        unFinanceFundsList: result.data,
                        unFinFunPagination: pager
                    });
                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },
    // 点击分页按钮，回调函数
    getPagination(value,page){
        let _me = this;
        switch(value) {
            case '1': 
                _me.setState({
                    myFundsPagination:page
                });

                _me.fetchMyFunds();

                break;
            case '2': 
                _me.setState({
                    otherFundsPagination:page
                });
                _me.fetchOtherFunds();
                break;
            case '3': 
                _me.setState({
                    unFinFunPagination:page
                });
                _me.fetchUnFinanceFunds();
                break;    
           
        }
    },
    
    // 点击tab回调函数
    handleChange(value){
        let _me = this;
        let page1 = _me.state.myFundsPagination;
            page1.current = 1;
            page1.currentPage = 1;
        let page2 = _me.state.otherFundsPagination;
            page2.current = 1;
            page2.currentPage = 1;
        let page3 = _me.state.unFinFunPagination;
            page3.current = 1;
            page3.currentPage = 1;
        
        switch(value) {
            case '1': 
                _me.setState({
                    myFundsPagination:page1
                });

                _me.fetchMyFunds();
                break;
            case '2': 
                _me.setState({
                    otherFundsPagination:page2
                });
                _me.fetchOtherFunds();
                break;
            case '3': 
                _me.setState({
                    unFinFunPagination:page3
                });
                _me.fetchUnFinanceFunds();
                break;
           
        }
    },

    // 获取详情
    getDetail(params){
        let _me = this;
        
        Utils.sendAjax({
            url: '/finance/list/detail',
            data: JSON.stringify(params),
            callback: function(result) {
                if (result.code == '200') {
                    let params = {
                        detailData: result.data
                    }
                    let goPathUrl = '/funder/resource/detail';
                    _me.context.router.push({pathname: goPathUrl, state: {...params}})

                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },

    render() {
        
        return (
            <div>
                <h2>融资概况</h2>
                <div className="accountData clearfix">
                    <div className="fl">
                        <Charts/>
                    </div>
                    <div className="fl" style={{position:'relative'}}>
                        <FunderTypeCharts/>
                    </div>
                    {
                    //     <div className="data fr">
                    //     <ul className="clearfix">
                    //         <li className="one clearfix fl">
                    //             <div className="pic fl"></div>
                    //             <div className="shuju fl">
                    //                 <p className="num">680</p>
                    //                 <p className="des">我融资的房源（套）</p>
                    //             </div>
                    //         </li>
                    //         <li className="two clearfix fl">
                    //             <div className="pic fl"></div>
                    //             <div className="shuju fl">
                    //                 <p className="num">1047</p>
                    //                 <p className="des">他人融资的房源（套）</p>
                    //             </div>
                    //         </li>
                    //         <li className="three clearfix fl">
                    //             <div className="pic fl"></div>
                    //             <div className="shuju fl">
                    //                 <p className="num">961</p>
                    //                 <p className="des">未被融资已出租的房源（套）</p>
                    //             </div>
                    //         </li>
                    //         <li className="four clearfix fl">
                    //             <div className="pic fl"></div>
                    //             <div className="shuju fl">
                    //                 <p className="num">145</p>
                    //                 <p className="des">未被融资未出租的房源（套）</p>
                    //             </div>
                    //         </li>
                    //     </ul>
                    // </div>
                    }
                    
                </div>
                <div className="total">
                    <p>房源类型统计</p>
                    <p>融资类型统计</p>
                </div>
                <div className="tableContainer">
                <Tabs defaultActiveKey="1" onChange={this.handleChange}>
                    <TabPane tab="我提供融资的" key="1" >
                        <MyFundsList dataList={this.state.myFundsList}
                        getPagination={this.getPagination}
                        getDetail={this.getDetail}
                        pagination={this.state.myFundsPagination}
                        />
                     
                    </TabPane>
                    <TabPane tab="他人提供融资的" key="2">
                        <OtherFundsList  dataList={this.state.otherFundsList}
                        getPagination={this.getPagination}
                        getDetail={this.getDetail}
                        pagination={this.state.otherFundsPagination}/>
                        
                    </TabPane>
                    <TabPane tab="未被融资的" key="3">
                        <UnFinanceFundsList dataList={this.state.unFinanceFundsList}
                        getPagination={this.getPagination}
                        getDetail={this.getDetail}
                        pagination={this.state.unFinFunPagination}/>
                        
                    </TabPane>
                </Tabs>
                </div>

            </div>
        )
    }
})
export default List